<template>
  <div class="container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
      <div class="tabs">
        <div
          class="tab"
          :class="tabSelected == 'equ' ? 'active' : ''"
          @click="tabSelect('equ')"
        >
          设备风险
        </div>
        <div
          class="tab"
          :class="tabSelected == 'sydw' ? 'active' : ''"
          @click="tabSelect('sydw')"
        >
          单位风险
        </div>
      </div>
      <div class="table" v-if="tabSelected == 'equ'">
        <el-table
          :data="equTableData"
          style="
          width:100%
            height: 98%;
          "
          fit
          height="800"
        >
          <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
          <el-table-column prop="f001" label="设备代码"> </el-table-column>
          <el-table-column prop="f032" label="使用单位"> </el-table-column>
          <el-table-column prop="f037" label="企业编号"> </el-table-column>
          <el-table-column prop="qzl" label="起重量"> </el-table-column>
          <el-table-column prop="f099" label="工作级别"> </el-table-column>
          <el-table-column prop="f061" label="使用年限"> </el-table-column>
          <el-table-column prop="f048" label="定检结果"> </el-table-column>
          <el-table-column prop="riskValue" label="风险值"> </el-table-column>
          <el-table-column prop="riskLevel" label="设备风险等级">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="equPageSizeChange"
          @current-change="equPageChange"
          :current-page="equCurrentPage"
          :page-sizes="[15, 30, 50, 80]"
          :page-size="equPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="equTotal"
          style="margin-top: 20px"
        >
        </el-pagination>
      </div>
      <div class="table" v-if="tabSelected == 'sydw'">
        <el-table
          :data="sydwTableData"
          style="
          width:100%
            height: 98%;
          "
          fit
          height="800"
        >
          <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
          <el-table-column prop="f032" label="使用单位"> </el-table-column>
          <el-table-column prop="equCount" label="设备总量"> </el-table-column>
          <el-table-column prop="highCount" label="高风险设备量">
          </el-table-column>
          <el-table-column prop="mediumCount" label="中风险设备量">
          </el-table-column>
          <el-table-column prop="lowCount" label="低风险设备量">
          </el-table-column>
          <el-table-column prop="riskLevel" label="单位风险等级">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="sydwPageSizeChange"
          @current-change="sydwPageChange"
          :current-page="sydwCurrentPage"
          :page-sizes="[15, 30, 50, 80]"
          :page-size="sydwPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sydwTotal"
          style="margin-top: 20px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
const allEquList = require("./equ_list.json");
const allSydwList = require("./sydw_list.json");
export default {
  components: { Breadcrumb },
  data() {
    return {
      naviItems: [
        { text: "起重机械" },
        { text: "数据引擎" },
        { text: "定检数据" },
      ],
      tabSelected: "equ", // 默认选中设备风险tab
      equTotal: 0,
      equPageSize: 15,
      equCurrentPage: 1,
      equTableData: [],
      equSearchArgs: {
        offset: 0,
        num: 15,
      },
      sydwTotal: 0,
      sydwPageSize: 15,
      sydwCurrentPage: 1,
      sydwTableData: [],
      sydwSearchArgs: {
        offset: 0,
        num: 15,
      },
    };
  },
  created() {
    this.showEqu();
  },

  methods: {
    tabSelect(tab) {
      this.tabSelected = tab;
      if (tab == "equ") {
        this.showEqu();
      }
      if (tab == "sydw") {
        this.showSydw();
      }
    },
    // 获取设备列表
    showEqu() {
      setTimeout(() => {
        const list = allEquList.slice(
          +this.equSearchArgs.offset,
          +this.equSearchArgs.offset + +this.equSearchArgs.num
        );
        for (const index in list) {
          list[index].Id = +index + 1 + this.equSearchArgs.offset;
        }
        this.equTableData = list;
        this.equTotal = allEquList.length;
      }, 450);
    },
    // 获取单位列表
    showSydw() {
      setTimeout(() => {
        const list = allSydwList.slice(
          +this.sydwSearchArgs.offset,
          +this.sydwSearchArgs.offset + +this.sydwSearchArgs.num
        );
        for (const index in list) {
          list[index].Id = +index + 1 + this.sydwSearchArgs.offset;
        }
        this.sydwTableData = list;
        this.sydwTotal = allSydwList.length;
      }, 450);
    },
      // 页面大小改变
    async equPageSizeChange(pageSize) {
      this.equPageSize = +pageSize;
      this.equCurrentPage = 1;
      this.equSearchArgs.offset = 0;
      this.equSearchArgs.num = pageSize;
      // 获取数据
      this.showEqu();
    },
    // 页数改变
    async equPageChange(page) {
      this.equCurrentPage = page;
      this.equSearchArgs.offset = (page - 1) * this.equSearchArgs.num;
      // 获取数据
      this.showEqu();
    },
    // 页面大小改变
    async sydwPageSizeChange(pageSize) {
      this.sydwPageSize = +pageSize;
      this.sydwCurrentPage = 1;
      this.sydwSearchArgs.offset = 0;
      this.sydwSearchArgs.num = pageSize;
      // 获取数据
      this.showSydw();
    },
    // 页数改变
    async sydwPageChange(page) {
      this.sydwCurrentPage = page;
      this.sydwSearchArgs.offset = (page - 1) * this.sydwSearchArgs.num;
      // 获取数据
      this.showSydw();
    },
  },
};
</script>
<style lang="less" scoped>
div.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.tabs {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-top: 10px;
    .tab {
      flex-grow: 1;
      color: white;
      background: #7f7f7f;
      margin: 10px 2px 10px 2px;
      font-size: 24px;
      text-align: center;
      // line-height: 24px;
      padding-top: 10px;
      padding-bottom: 10px;

      &:hover {
        background: #0070c0;
        cursor: pointer;
      }
    }
    .tab.active {
      background: #0070c0;
    }
  }
  div.table {
    width: 90%;
    margin-top: 20px;
  }
}
</style>
